<template>
  <div class="condition-container">
    <el-form ref="conditionForm" :model="condition" :rules="rules" :inline="true" size="small" label-width="100px" label-position="right">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-light">
            <el-tag color="#e5e9f2" style="border-style: none;padding-top:3px;">
              条件{{ index + 1 }}
              <el-divider direction="vertical" />
              <el-button type="text" size="mini" icon="el-icon-top" @click="moveUp(index)">上移</el-button>
              <el-divider direction="vertical" />
              <el-button type="text" size="mini" icon="el-icon-bottom" @click="moveDown(index)">下移</el-button>
              <el-divider direction="vertical" />
              <el-button size="mini" type="text" icon="el-icon-plus" @click="add">添加条件</el-button>
              <el-divider direction="vertical" />
              <el-button size="mini" type="text" icon="el-icon-delete" @click="del(index)">删除条件</el-button>
            </el-tag>
          </div>
        </el-col>
      </el-row>
      <el-row style="padding-top:11px;">
        <el-col :span="7">
          <el-form-item label="表单名称:" label-width="100px" required prop="sheetVariableName">
            <el-select v-model="condition.sheetVariableName" placeholder="请选择" size="mini" style="width: 125px;">
              <el-option v-for="item in sheetNames" :key="item.value" style="line-height: 20px;height:25px;" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="Excel列号:" label-width="100px" required prop="columnIndex">
            <el-input v-model="condition.columnIndex" placeholder="点击按钮选择" disabled style="width: 100px;" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="Excel列名:" label-width="100px" required prop="columnName">
            <el-input v-model="condition.columnName" placeholder="点击按钮选择" disabled style="width: 100px;" size="mini" />
            <el-button size="mini" type="primary" round @click="selectSheetColumn">选择表单列</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-collapse v-model="activeExternalChecked" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <i class="el-icon-caret-right" />外联判断
            <el-divider direction="vertical" />
            <el-checkbox v-model="externalChecked" @change="selectExternal" />
          </template>
          <el-form-item label="规则2编号:" label-width="100px">
            <el-input v-model="condition.colExternalJudgeValue" placeholder="请选择" disabled style="width: 125px;" size="mini" @focus="selectExternal" />
          </el-form-item>
          <el-form-item label="外挂清单:" label-width="100px">
            <el-input v-model="condition.externalLinkName" placeholder="请选择" disabled style="width: 100px;" size="mini" @focus="selectExternal" />
            <el-input v-show="false" v-model="condition.colExternalJudgeValue" placeholder="请输入内容" size="mini" @focus="selectExternal" />
          </el-form-item>
          <el-form-item label="">
            <el-button size="mini" type="primary" round @click="selectExternalLink">选择</el-button>
          </el-form-item>
          <el-form-item label="">
            <el-radio-group v-model="condition.colExternalJudgeType" size="mini">
              <el-radio v-for="item in colExternalJudgeTypes" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>

      <el-collapse v-model="activeWithinChecked" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <i class="el-icon-caret-right" />列内判断
            <el-divider direction="vertical" />
            <el-checkbox v-model="withinChecked" size="mini" @change="selectWithin" />
          </template>
          <el-form-item label="请选择:" label-width="100px">
            <!--<el-radio-group v-model="condition.colWithinJudgeType" size="mini" @change="selectColWithinJudgeType">
              <el-radio v-for="item in colWithinJudgeTypes" :key="item.value" style="width:75px;" :label="item.value">{{ item.name }}</el-radio>
            </el-radio-group>-->
            <el-select v-model="condition.colWithinJudgeType" placeholder="选择操作" size="mini" style="width: 125px;" @change="selectColWithinJudgeType">
              <el-option v-for="item in colWithinJudgeTypes" :key="item.value" style="line-height:20px;height:25px;" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="填写值:" label-width="100px">
            <el-tooltip class="item" effect="dark" content="空值填null" placement="bottom">
              <el-input v-model="condition.colWithinJudgeValue" type="textarea" :rows="1" placeholder="请输入内容(多个值用','隔开)" size="mini" style="width: 180px;" @focus="selectWithin" />
            </el-tooltip>
            <span class="prompt-f-bg">空值填null</span>
          </el-form-item>
          <el-form-item label="忽略大小写">
            <el-checkbox v-model="withinIgnoreCaseChecked" @change="selectWithin" @focus="selectWithin" />
          </el-form-item>
        </el-collapse-item>
      </el-collapse>

      <el-collapse v-model="activeLengthChecked" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <i class="el-icon-caret-right" />长度判断
            <el-divider direction="vertical" />
            <el-checkbox v-model="lengthChecked" size="mini" @change="selectLength" />
          </template>
          <el-form-item label="最小长度:" label-width="100px">
            <el-input-number v-model="condition.minLength" placeholder="请输入" min="0" size="mini" style="width: 125px;" clearable @focus="selectLength" @change="minLengthChanged" />
          </el-form-item>
          <el-form-item label="最大长度:" label-width="100px">
            <el-input-number v-model="condition.maxLength" placeholder="请输入" min="0" size="mini" style="width: 125px;" clearable @focus="selectLength" @change="maxLengthChanged" />
          </el-form-item>
        </el-collapse-item>
      </el-collapse>

      <el-collapse v-model="activeBetweenChecked" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <i class="el-icon-caret-right" />列间判断
            <el-divider direction="vertical" />
            <el-checkbox v-model="betweenChecked" size="mini" @change="selectBetween" />
          </template>
          <el-row>
            <el-col :span="8">
              <el-form-item label="关系:" label-width="100px">
                <el-select v-model="condition.operation2" placeholder="请选择操作" style="width: 125px;" size="mini" @change="selectBetween" @focus="selectBetween">
                  <el-option v-for="item in operation2Options" :key="item.value" style="line-height: 20px;height:25px;" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="忽略大小写">
                <el-checkbox v-model="betweenIgnoreCaseChecked" @change="selectBetween" @focus="selectBetween" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="表单名称:" label-width="100px">
                <el-select v-model="condition.sheetVariableName2" placeholder="请选择表单" size="mini" style="width: 125px;" @change="selectBetween" @focus="selectBetween">
                  <el-option v-for="item in sheetNames" :key="item.value" style="line-height: 20px;height:25px;" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="Excel列号:" label-width="100px">
                <el-input v-model="condition.columnIndex2" placeholder="点击按钮选择" size="mini" disabled style="width: 100px;" @change="selectBetween" @focus="selectBetween" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="Excel列名:" label-width="100px">
                <el-input v-model="condition.columnName2" placeholder="点击按钮选择" size="mini" disabled style="width: 100px;" @change="selectBetween" @focus="selectBetween" />
                <el-button size="mini" type="primary" round @click="selectSheetColumn2">选择表单列</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <div v-if="showOperation">
        <el-divider content-position="left">与条件{{ index + 2 }}的关系</el-divider>
        <el-form-item label="关系:" label-width="100px">
          <el-select v-model="condition.operation" placeholder="请选择操作" style="width: 140px;" size="mini">
            <el-option v-for="item in operations" :key="item.value" style="line-height: 20px;height:25px;" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </div>
    </el-form>

    <rule2List ref="rule2List" :parent="currentObject" @setRule2="setRule2" />
    <sheetColumnList ref="sheetColumnList" :parent="currentObject" @setSheetColumn="setSheetColumn" @setSheetColumn2="setSheetColumn2" />
  </div>
</template>

<script>
import { findRuleSheetNames } from '@/api/rule3'
import { findRuleSheetColumnName } from '@/api/rule3'
import { findAllJudgementTypes } from '@/api/rule3'

import rule2List from './rule2List'
import sheetColumnList from './sheetColumnList'

export default {
  components: {
    rule2List,
    sheetColumnList
  },
  props: {
    index: {
      type: Number,
      required: true
    },
    conditionSize: {
      type: Number,
      default: 1
    },
    condition: {
      type: Object,
      required: true
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      currentObject: this,
      rules: {
        columnIndex: [{ required: true, message: '列号不能为空', trigger: 'blur' }, { required: true, message: '列号不能为空', trigger: 'change' }],
        columnName: [{ required: true, message: '列名不能为空', trigger: 'blur' }, { required: true, message: '列名不能为空', trigger: 'change' }],
        sheetVariableName: [{ required: true, message: '表单名称不能为空', trigger: 'blur' }, { required: true, message: '表单名称不能为空', trigger: 'change' }]
      },
      operation2Options: [
        { value: '==', label: '等于' },
        { value: '!=', label: '不等于' },
        { value: '<', label: '小于' },
        { value: '<=', label: '小于等于' },
        { value: '>', label: '大于' },
        { value: '>=', label: '大于等于' }
      ],
      operations: [{ value: 'and', label: 'and' }, { value: 'or', label: 'or' }],
      sheetNames: [{ name: '', value: null }],
      colWithinJudgeTypes: [],
      colExternalJudgeTypes: [{ value: 'exist', name: '存在' }, { value: 'notExist', name: '不存在' }],
      within: 'within',
      external: 'external',
      between: 'between'
    }
  },
  computed: {
    // 最后一个条件表达式不显示操作符
    showOperation: function() {
      var size = this.conditionSize - 1
      if (size === this.index) {
        return false
      } else {
        return true
      }
    },
    activeWithinChecked: {
      get: function() {
        return this.condition.conditionType === this.within ? '1' : '0'
      },
      set: function() {
      }
    },
    activeLengthChecked: {
      get: function() {
        return this.condition.conditionType === this.parent.length ? '1' : '0'
      },
      set: function() {
      }
    },
    activeExternalChecked: {
      get: function() {
        return this.condition.conditionType === this.external ? '1' : '0'
      },
      set: function() {
      }
    },
    activeBetweenChecked: {
      get: function() {
        return this.condition.conditionType === this.between ? '1' : '0'
      },
      set: function() {
      }
    },
    withinChecked: {
      get: function() {
        return this.condition.conditionType === this.within
      },
      set: function() {
        this.condition.conditionType = this.within
      }
    },
    lengthChecked: {
      get: function() {
        return this.condition.conditionType === this.parent.length
      },
      set: function() {
        this.condition.conditionType = this.parent.length
      }
    },
    externalChecked: {
      get: function() {
        return this.condition.conditionType === this.external
      },
      set: function() {
        this.condition.conditionType = this.external
      }
    },
    betweenChecked: {
      get: function() {
        return this.condition.conditionType === this.between
      },
      set: function() {
        this.condition.conditionType = this.between
      }
    },
    betweenIgnoreCaseChecked: {
      get: function() {
        return this.condition.betweenIgnoreCase && this.condition.betweenIgnoreCase === 'Y'
      },
      set: function(val) {
        this.condition.betweenIgnoreCase = val ? 'Y' : 'N'
      }
    },
    withinIgnoreCaseChecked: {
      get: function() {
        return this.condition.withinIgnoreCase && this.condition.withinIgnoreCase === 'Y'
      },
      set: function(val) {
        this.condition.withinIgnoreCase = val ? 'Y' : 'N'
      }
    }
  },
  created() {
    this.loadSheetName()
    this.loadColWithinJudgeTypes()
  },
  methods: {
    compare(value1, value2) {
      if (value1 < value2) {
        return -1
      } else if (value1 > value2) {
        return 1
      } else {
        return 0
      }
    },
    moveUp(index) { // 上移
      if (index <= 0) {
        console.log('moveUp:' + index)
        return
      }
      console.log('moveUp:' + index)
      var conditions = this.parent.conditions
      this.parent.conditions = []
      var condition = conditions[index]
      conditions[index] = conditions[index - 1]
      conditions[index - 1] = condition
      conditions.forEach((cur, inx) => {
        this.$set(this.parent.conditions, inx, cur)
      })
      // console.log('moveUp conditions:' + JSON.stringify(this.parent.conditions))
    },
    moveDown(index) { // 下移
      console.log('moveDown:' + index + ' size:' + this.parent.conditions.length)
      if (index >= this.parent.conditions.length - 1) {
        console.log('moveDown:' + index)
        return
      }
      console.log('moveDown condition size:' + this.parent.conditions.length)
      console.log('moveDown:' + index)
      var conditions = this.parent.conditions
      this.parent.conditions = []
      var condition = conditions[index]
      conditions[index] = conditions[index + 1]
      conditions[index + 1] = condition
      conditions.forEach((cur, inx) => {
        this.$set(this.parent.conditions, inx, cur)
      })
      // console.log('moveDown conditions:' + JSON.stringify(this.parent.conditions))
    },
    selectColumnIndex(val) {
      if (!val) {
        this.condition.columnName = ''
        return
      }
      var _this = this
      val = val.toUpperCase()
      this.condition.columnIndex = val
      findRuleSheetColumnName(this.condition.sheetVariableName, val).then(res => {
        _this.condition.columnName = res.result
      })
    },
    selectColumn2Index(val) {
      if (!val) {
        this.condition.columnName2 = ''
        return
      }
      var _this = this
      val = val.toUpperCase()
      this.condition.columnIndex2 = val
      findRuleSheetColumnName(this.condition.sheetVariableName2, val).then(res => {
        _this.condition.columnName2 = res.result
      })
    },
    selectSheetColumn() {
      if (this.condition.sheetVariableName === null || this.condition.sheetVariableName === '') {
        this.$confirm('请选择表单名称！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        })
        return
      }
      const _sheetColumnList = this.$refs.sheetColumnList
      _sheetColumnList.sheetColumnDialogTitle = '表单列名选择'
      _sheetColumnList.dialog = true
      _sheetColumnList.callbackMethod = 'setSheetColumn'
      _sheetColumnList.sheetVariableName = this.condition.sheetVariableName
      // _sheetColumnList.toQuery()
    },
    setSheetColumn(val) {
      // console.log('setSheetColumn', JSON.stringify(val))
      if (!val) {
        this.condition.columnName = ''
        return
      }
      this.condition.columnIndex = val.columnIndex
      this.condition.columnName = val.columnName
    },
    selectSheetColumn2() {
      if (this.condition.sheetVariableName2 === null || this.condition.sheetVariableName2 === '') {
        this.$confirm('请选择表单名称！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        })
        return
      }
      const _sheetColumnList = this.$refs.sheetColumnList
      _sheetColumnList.sheetColumnDialogTitle = '表单列选择'
      _sheetColumnList.dialog = true
      _sheetColumnList.sheetVariableName = this.condition.sheetVariableName2
      _sheetColumnList.callbackMethod = 'setSheetColumn2'
      // _sheetColumnList.toQuery()
    },
    setSheetColumn2(val) {
      // console.log('setSheetColumn2', JSON.stringify(val))
      if (!val) {
        this.condition.columnName2 = ''
        return
      }
      this.condition.columnIndex2 = val.columnIndex
      this.condition.columnName2 = val.columnName
    },
    loadSheetName() {
      var _this = this
      findRuleSheetNames().then(res => {
        _this.sheetNames = res.result
      })
    },
    loadColWithinJudgeTypes() {
      var _this = this
      findAllJudgementTypes().then(res => {
        _this.colWithinJudgeTypes = res.result
      })
    },
    selectColWithinJudgeType(val) {
      this.selectWithin()
    },
    // 删除条件
    del(index) {
      this.$emit('delCondition', index)
    },
    add() {
      this.$emit('addCondition')
    },
    selectExternalLink() {
      this.condition.conditionType = this.external
      const _rule2 = this.$refs.rule2List
      _rule2.rule2DialogTitle = '表单列选择'
      _rule2.dialog = true
    },
    selectExternal() {
      this.condition.conditionType = this.external
    },
    selectWithin() {
      this.condition.conditionType = this.within
      this.condition.betweenIgnoreCase = null
    },
    selectLength() {
      this.condition.conditionType = this.parent.length
    },
    selectBetween() {
      this.condition.conditionType = this.between
      this.condition.withinIgnoreCase = null
    },
    // 设置外挂清单
    setRule2(rule2) {
      // console.log('setRule2：', JSON.stringify(rule2))
      this.condition.colExternalJudgeValue = rule2.id
      this.condition.externalLinkName = rule2.listName
      this.condition.columnIndex = rule2.rowSite
      this.condition.columnName = rule2.rowName
      this.condition.sheetVariableName = rule2.sheetVariableName
    },
    minLengthChanged(val) {

    },
    maxLengthChanged(val) {

    }
  }
}
</script>
<style scoped>
  .el-row {
    margin-bottom: 0px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .condition-container >>> .prompt-f-bg{
    color:indianred
  }
  .condition-container >>> .prompt-f-bg .el-form-item__label{color:indianred}

  .condition-container >>> .el-divider.el-divider--horizontal{
    margin: 10px 0;
  }
  .condition-container .el-divider.el-divider--vertical{
    margin: 0px 4px;
  }
  .condition-container >>> .el-form-item--small.el-form-item{
    margin-bottom: 15px
  }
  .condition-container >>>.el-select-dropdown__item{
    line-height: 10px;
    height: 25px;
  }
</style>
